$(function () {
    echart_4();
    echart_2();
    echart_5();
});


function echart_4() {
    var myChart = echarts.init(document.getElementById('chart_4'));
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['用电量（单位千瓦）'],
            textStyle: {
                color: '#fff'
            },
            top: '8%'
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        color: ['#FF4949', '#FFA74D', '#FFEA51', '#4BF0FF'],
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['7', '8', '9', '10', '11', '12', '13','14', '15', '16'],
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF'
                }
            }
        },
        yAxis: {
            name: '',
            type: 'value',
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: '10'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            name: '用电量',
            type: 'line',
            data: [0.39, 0.42, 0.15, 0.86, 0.56,0.14,0.62,0.96,0.14,0.62,],
            label:{
                show:true,
                color:'#fff',
            }
        },
        ]
    };

    myChart.setOption(option);
}

function echart_5() {
    var myChart = echarts.init(document.getElementById('chart_5'));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: '{b1}:<br />AQI:{c1}'
        },
        grid: {
            left: '3%',
            right: '7%',
            top: '10%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: '10'
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: ['red']
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                    width: 2, //这里是坐标轴的宽度,可以去掉
                }
            }
        },
        yAxis: {
            type: 'category',
            data: ['海豚馆', '海狮馆', '鲨鱼馆'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            // y轴的颜色和宽度
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                    width: 1, //这里是坐标轴的宽度
                }
            }
        },
        series: [
            {
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'inside'//文本显示位置
                    }
                },
                data: [100, 200, 300]
            }]
    };

    myChart.setOption(option);
    myChart.on('click', function (params) {
        location.href = "index2.html";
    });

    // setInterval(function () {
    //     option.series[0].data[0] = parseInt(Math.random() * 400) + 60;
    //     myChart.setOption(option, true);
    // }, 2000);
}


//饼图 pie
function echart_2() {
    var myChart = echarts.init(document.getElementById('chart_2'));
    var option = {
        color: ['#A0CE3A', '#31C5C0', '#1E9BD1', '#0F347B', '#585247', '#7F6AAD', '#009D85', "rgba(250,250,250,0.3)"],
        title: {
            text: '设备总数',
            subtext: 290,
            textStyle: {
                color: '#f2f2f2',
                fontSize: 18,
                align: 'center'
            },
            subtextStyle: {
                fontSize: 22,
                color: ['#ff9d19']
            },
            x: 'center',
            y: 'center',
        },
        series: [{
            name: "设备联网率",
            radius: ['40%', '61%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
                normal: {
                    show: true,
                    formatter: "{b}数: {c}",
                    position: 'outside'
                }
            },
            data: [
                { value: 185, name: '连接' },
                { value: 60, name: '断网' },
            ],
        },
        {
            name: '内边框',
            radius: ['40%', '40%'],
            center: ['50%', '50%'],
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            labelLine: {
                normal: { show: false, },
                emphasis: { show: false }
            },
            data: [{
                value: 1,
                itemStyle: { color: "rgba(250,250,250,0.3)", },
            }],
        }, {
            name: '外边框',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            center: ['50%', '50%'],
            radius: ['65%', '65%'],
            labelLine: {
                normal: { show: false, },
                emphasis: { show: false }
            },
            data: [{
                value: 1,
                itemStyle: {
                    normal: { borderWidth: 2, borderColor: '#0b5263' }
                }
            }]
        },
        ]
    };
    myChart.setOption(option);

    // setInterval(function() { 
    //     option.series[0].data[0].value = parseInt(Math.random() * 40) + 60;
    //     myChart.setOption(option, true);
    // }, 2000);
    myChart.on('click', function (params) {
        var $modal = $('#myModal');
        $modal.modal({ backdrop: 'static' });
        $modal.on('shown.bs.modal', function () {
            var $this = $(this);
            var $modal_dialog = $this.find('.modal-dialog');
            var m_top = ($(window).height() - $modal_dialog.height()) / 2;
            $modal_dialog.css({ 'margin': m_top + 'px auto' });//居中
        });
    });
}